<template>
  <div class="edit-page">
    <div class="page-header">
      <el-button class="back-button" icon="el-icon-back" @click="goback">返回</el-button>
      <div class="page-title">组织信息{{ this.form.id?'编辑':'新增' }}</div>
    </div>
    <div class="page-body">
      <el-form
        inline
        label-width="175px"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <div class="titleStyle">
          <span>基本信息</span>
        </div>
        <el-form-item prop="fullNamePartyOrg" label="党组织全称">
          <el-input v-model="form.fullNamePartyOrg" size="mini" />
        </el-form-item>
        <el-form-item label="党组织代码">
          <el-input v-model="form.partyOrgCode" size="mini" />
        </el-form-item>
        <el-form-item label="上级党组织">
          <ClassifyTreeSelect @input="getParentId" @getValue="getParentNode" :value="form.parentId" size="mini" />
        </el-form-item>
        <el-form-item label="党组织简称">
          <el-input v-model="form.partyOrgAbb" size="mini" />
        </el-form-item>
        <el-form-item label="党组织联系人">
          <el-select filterable v-model="form.partyOrgContactId" size="mini">
            <el-option
              v-for="item in personList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="党组织联系方式">
          <el-input v-model="form.partyOrgContactInfo" size="mini" />
        </el-form-item>
        <el-form-item label="传真">
          <el-input v-model="form.fax" size="mini" />
        </el-form-item>
        <el-form-item label="邮编">
          <el-input v-model="form.zip" size="mini" />
        </el-form-item>
        <el-form-item prop="orgCategory" label="组织类别">
          <el-select v-model="form.orgCategory" size="mini">
            <el-option
              v-for="(item,index) in orgClassList"
              :key="index"
              :label="item"
              :value="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="partyOrgTerrRela" label="党组织属地关系">
          <el-input v-model="form.partyOrgTerrRela" size="mini" />
        </el-form-item>
        <el-form-item label="党组织建立日期">
          <el-date-picker
            v-model="form.partyOrgEstabTime"
            size="mini"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="党组织领导班子届次">
          <el-input v-model="form.partyOrgSessLeaderTeam" size="mini" placeholder="例如：第一届" />
        </el-form-item>
        <el-form-item label="党组织开展评议日期">
          <el-date-picker
            v-model="form.partyOrgDateReview"
            size="mini"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="党组织结束评议日期">
          <el-date-picker
            v-model="form.partyOrgDateEnd"
            size="mini"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="领导集体当选日期">
          <el-date-picker
            v-model="form.leadersElectedDate"
            size="mini"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="该届届满日期">
          <el-date-picker
            v-model="form.termExpiresDate"
            size="mini"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item prop="orgMailingAddress" style="width: calc(100% - 100px);" label="组织通讯地址">
          <el-input v-model="form.orgMailingAddress" size="mini" />
        </el-form-item>
        <el-form-item label="组织照片">
          <el-upload
            action="http://10.4.10.50:9010/file/upload"
            :auto-upload="true"
            :multiple="false"
            :limit="1"
            class="avatar-uploader"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div class="titleStyle">
          <span>单位信息</span>
        </div>
        <el-form-item label="党组织所在单位情况">
          <el-select v-model="form.partyOrgSituationUnit" size="mini">
            <el-option
              v-for="(item,index) in unitSituation"
              :key="index"
              :label="item"
              :value="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="党组织所在单位情况代码">
          <el-input v-model="form.partyOrgSituationUnitCode" size="mini" />
        </el-form-item>
        <el-form-item label="单位名称">
          <el-input v-model="form.unitName" size="mini" />
        </el-form-item>
        <el-form-item label="党组织所在单位代码">
          <el-input v-model="form.unitCode" size="mini" />
        </el-form-item>
        <el-form-item prop="unitCategory" label="单位类别">
          <el-select v-model="form.unitCategory" size="mini">
            <el-option
              v-for="(item,index) in unitClassList"
              :key="index"
              :label="item"
              :value="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="unitAffiliation" label="单位隶属关系">
          <el-input v-model="form.unitAffiliation" size="mini" />
        </el-form-item>
        <el-form-item label="单位建立党组织的情况">
          <el-input v-model="form.unitInfo" size="mini" />
        </el-form-item>
      </el-form>
      <div class="titleStyle">
        <span>奖惩信息</span>
        <el-button type="success" size="mini" @click="add">添加</el-button>
      </div>
      <el-table
        :data="tableData"
      >
        <el-table-column align="center" label="奖惩名称">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.name" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="奖惩日期">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.rewardPunishDate"
              size="mini"
              type="date"
              value-format="yyyy-MM-dd"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="奖惩说明">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.illustrate" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="批准奖惩的党组织">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.approvePartyOrgName" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              style="color:#F56C6C;"
              @click="del(scope.$index)"
            >撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-footer">
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import ClassifyTreeSelect from '@/components/classifyTree/classifyTreeSelect.vue'
import { addOrg, editOrg, queryPersonList } from '@/api/partyMemberManagement/organizationalInformationManagement.js'
export default {
  components: {
    ClassifyTreeSelect
  },
  data () {
    return {
      form: {},
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      orgClassList: ['党委', '党总支', '党支部'],
      unitClassList: ['企业', '农村', '机关', '学校', '科研院所', '街道社区', '社会团体', '社会中介组织', '人民解放军连队', '其他基层单位'],
      unitSituation: ['与上级党组织相同', '法人单位', '联合支部', '其他'],
      tableData: [],
      personList: [],
      imageUrl: '',
      rules: {
        fullNamePartyOrg: [{ required: true, message: '请输入党组织全称', trigger: 'change' }],
        orgCategory: [{ required: true, message: '请选择组织类别', trigger: 'change' }],
        partyOrgTerrRela: [{ required: true, message: '请输入党组织属地关系', trigger: 'change' }],
        orgMailingAddress: [{ required: true, message: '请输入组织通讯地址', trigger: 'change' }],
        unitCategory: [{ required: true, message: '请选择单位类别', trigger: 'change' }],
        unitAffiliation: [{ required: true, message: '请输入单位隶属关系', trigger: 'change' }]
      }
    }
  },
  mounted () {
    this.getPersonList()
  },
  methods: {
    init (row) {
      this.form = { ...row }
      this.tableData = row?.rewardPunishInfoVOList || []
    },
    goback () {
      this.form = {}
      this.tableData = []
      this.$emit('goback', false)
    },
    // 上传前校检格式和大小
    handleBeforeUpload (file) {
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`)
          return false
        }
      }
      return true
    },
    handleUploadSuccess (res, file) {},
    handleUploadError () {
      this.$message.error('图片上传失败')
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let submitForm = addOrg
          if (this.form.id) {
            submitForm = editOrg
          }
          delete this.form.rewardPunishInfoVOList
          submitForm({ ...this.form, rewardPunishInfoDTOList: this.tableData }).then((res) => {
            this.form = {}
            this.tableData = []
            this.$message.success('保存成功')
            this.$emit('goback', true)
          })
        }
      })
    },
    getParentNode (node) {
      this.form.parentId = node?.id || null
    },
    getParentId (id) {
      // console.log('id', id)
    },
    getPersonList () {
      queryPersonList().then((res) => {
        this.personList = res?.data || []
      })
    },
    add () {
      const obj = {
        name: '',
        rewardPunishDate: '',
        approvePartyOrgId: '',
        approvePartyOrgName: '',
        illustrate: ''
      }
      this.tableData.unshift(obj)
    },
    del (index) {
      const arr = JSON.parse(JSON.stringify(this.tableData))
      arr.splice(index, 1)
      this.tableData = arr
    }
  }
}
</script>
<style scoped lang="scss">
  .page-header {
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #ddd;
    .back-button {
      margin-right: 16px;
    }
    .page-title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .page-body {
    height: calc(100vh - 190px);
    overflow-y: auto;
    .el-form-item {
      width: calc(50% - 24px);
      ::v-deep .el-input__inner {
        width: 300px;
      }
    }
    .avatar-uploader {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader :hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 240px;
      height: 180px;
      line-height: 180px;
      text-align: center;
    }
    .avatar {
      width: 240px;
      height: 180px;
      display: block;
    }
    .titleStyle {
      font-weight: 600;
      height: 35px;
      line-height: 35px;
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
      background-color: #d8eff9;
      display: flex;
      justify-content: space-between;
    }
  }
  .page-footer {
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
</style>
